<script lang="ts" setup>
import useAppStore from '@/store/app'
import { storeToRefs } from 'pinia';
import { Menu } from '@/api/system/menus/type'

interface Prop {
    menuList: Menu[]
}
const appStore = useAppStore()
const { layout } = storeToRefs(appStore)

const props = withDefaults(defineProps<Prop>(), {
    menuList: () => []
})
const route = useRoute()
</script>

<template>
    <ElMenu :default-active="route.path" :collapse="layout.isCollapse" router>
        <ElMenuItem index="/index">
            <ElIcon>
                <i inline-flex i-el-dashboard />
            </ElIcon>
            <template #title>
                首页
            </template>
        </ElMenuItem>
        <SidebarMenuItem v-for="menu in props.menuList" :menu="menu" />
    </ElMenu>
</template>

<style scoped>
.el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
}

.el-menu {
    border-right: none;
    background-color: transparent;
}
</style>